<template>
  <section>
    <a-form-item :label="label" :name="prop">
      <a-time-picker
        class="readonly"
        v-if="readonly"
        v-model="form[prop]"
        :placeholder="placeholder"
        :format="format"
        disabled
        style="width: 100%;background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;"
      />
      <a-time-picker
        v-else
        v-model="form[prop]"
        :placeholder="placeholder"
        :format="format"
        :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')"
        :disabled="disabled"
        :minute-step="minuteStep"
        :second-step="secondStep"
        style="width: 100%;"
      />
    </a-form-item>
  </section>
</template>

<script>
import moment from 'moment';
export default {
  name: 'TimePicker',
  props: {
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute'
    },
    // 文字
    label: {
      type: String,
      default: ''
    },
    // 日期格式
    format: {
      type: String,
      default: 'HH:mm:ss'
    },
    // 设置分钟步长
    minuteStep: {
      type: Number,
      default: 1
    },
    // 设置秒钟步长
    secondStep: {
      type: Number,
      default: 1
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: undefined
    };
  },
  methods: {
    moment
    // checkIt() {
    //   this.$emit('showDialog');
    // }
  }
};
</script>
<style>
  .readonly .ant-time-picker-input[disabled]{
    background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;
  }
</style>
